<!DOCTYPE html>
<html>
<head>
    <title>设置个人资料</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myInfo.css"/>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="js/common.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>


    <script type="text/javascript">
        $(function () {
            //获取相应的id,然后发送ajax请求
            var id = getParams().id;
            console.log(id);
            //发送ajax请求来获取相应的数据
            $.get("/hotels/" + id, function (data) {
                console.log(data);
                $(".info").renderValues(data);
                //设置回显背景图片
                $(".myBg").css("background-image", "url('" + data.coverUrl + "')")
            })
            //当点击保存的时候,会提交订单,保存数据

            $("#saveBtn").click(function () {
                //获取每个需要填写的值,并且要赋值
                //必须要姓名才能进行提交操作
                var cname = $("#infoForm input[name='customerName']").val();
                var tel = $("#infoForm input[name='tel']").val();
                var liveTime = $("#infoForm input[name='liveTime']").val();
                var outTime = $("#infoForm input[name='outTime']").val();
                console.log(cname);
                if (cname && tel && outTime && liveTime) {
                    $.ajax({
                        url: "/hotels",
                        data: $("#infoForm").serialize(),
                        type: "POST",
                        success: function (data) {
                            $(document).dialog({
                                type: "confirm",
                                style: "IOS",
                                titleShow: false,
                                content: "预定成功成功",
                                buttons: [{
                                    name: "返回主页面",
                                    callback: function () {
                                        // 2.回到个人信息界面
                                        location.href = "/index.html";
                                    }
                                }]
                            });

                        }


                    });
                }
                ;


            });
        });
    </script>
</head>

<body>


<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1);">
                <span>取消</span>
            </a>
        </div>
        <div class="col">
        </div>
        <div class="col">
            <a href="#" id="saveBtn">
                <span>提交</span>
            </a>
        </div>
    </div>
</div>

<div class="container info">
    <h3 render-html="name"></h3>
    <div class="myBg">

    </div>

    <form id="infoForm" method="post">
        <!--不需要再传id了，因为请求上面已经给了-->
        <!--<input type="hidden" name="id" >-->
        <input type="hidden" name="hotel.id" render-value="id">
        <label>姓名</label>
        <input type="" name="customerName" class="form-control"><br>
        <label>电话</label>
        <input type="number" name="tel" class="form-control"><br>
        <label>房间价格</label>
        <input type="number" name="pubPrice" class="form-control" render-value="pubPrice"><br>
        <label>性别</label>
        <select class="form-control" name="gender">
            <option value="-1">保密</option>
            <option value="1">男</option>
            <option value="0">女</option>
        </select><br>
        <label>入住日期</label>
        <input id="d4311" name="liveTime" class="form-control" type="text"
               onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')}',minDate:new Date()})"/>
        <i class="icon-bg icon-date"></i>
        <br>
        <label>离店日期</label>
        <input id="d4312" name="outTime" class="form-control" type="text"
               onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}'})"/>
        <i class="icon-bg icon-date"></i>
        <br>
        <label>地区</label>
        <input type="text" class="form-control" render-value="place.name"><br>
        <label>酒店介绍</label>
        <div class="content" render-html="hotelContent.content">
        </div>
    </form>
</div>

</body>
</html>
